<template>
<div class="banner"> 
  <van-swipe
    class="my-swipe"
    :autoplay="3000"
    duration="200"
    indicator-color="white"
  >
    <van-swipe-item v-for="obj in imglist" :key="obj.bannerid">
      <img :src="obj.img" @click="goUrl(obj.link)" />
    </van-swipe-item>
  </van-swipe></div>
 
</template>

<script>
import axios from "axios";

export default {
  name: "Banner",
  data() {
    return {
      imgs: [],
    };
  },
  created() {
    axios({
      url: "/api/banner/list",
    }).then((res) => {
      if (res.data.code == 200) {
        this.imgs = res.data.data;
      }
      console.log(res.data);
    });
  },
  computed: {
    imglist: function () {
      return this.imgs.filter((item) => item.flag);
    },
  },
  methods: {
    goUrl(url) {
      location.href = url;
    },
  },
};
</script>

<style scoped>
.my-swipe {
  /* width: 100%; */
  height: 9.5625rem;
  border-radius: 0.7rem;
  margin: 7px;
  background-color: #ededed;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item,
img {
  width: 100%;
  height: 100%;
  border-radius: 0.8rem;
}
</style>
